<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/public.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>夏栀天下第一</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div class="swiper">
            <div class="xz-menu">
                <div class="xz-menu-item" v-for="menu in menuList" :key="menu.id"
                    :class="menu.id===activeMenu?'xz-menu-item__active':''" @click="handleMenuClick(menu)">{{menu.name}}
                </div>
            </div>
            <div class="swiper-wrapper">
                <!-- 首页 -->
                <div class="swiper-slide">
                    <div class="xz-cover">
                        <div class="xz-overlap">THE QUEEN OF ROCKER</div>
                        <div class="xz-intro">摇子女王&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span>夏栀</span></div>
                    </div>
                </div>
                <!-- 最新动态 -->
                <div class="swiper-slide">
                    <div class="xz-ready">
                        <div class="xz-ready-text">2023-12-31 重庆dp次元动漫展</div>
                        <div class="xz-ready-text">2024-01-20 重庆第十届梦乡动漫展</div>
                    </div>
                </div>
                <!-- 照片墙 -->
                <div class="swiper-slide">
                    <div class="xz-photowall">
                        <div class="xz-photos">
                            <div class="swiper-wallpaper">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide" v-for="photo in photoList" ::key="photo.id">
                                        <img :src="photo.url" :alt="photo.name">
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- 关注夏栀 -->
                <div class="swiper-slide">
                    <div class="xz-guanzhu">
                        <div class="xz-href">
                            <div class="xz-href-img"><a href="https://space.bilibili.com/161045109"><img
                                        src="./images/appicons/bilibili.png" alt=""></a></div>
                            <div class="xz-href-name"> <a href="https://space.bilibili.com/161045109">夏安栀</a></div>
                        </div>
                        <div class="xz-href">
                            <div class="xz-href-img"><a
                                    href="https://www.douyin.com/user/MS4wLjABAAAACzQ7sRiH1hLqB8dIsZtbBJDOes48eCHYNj_IwYJAhjA"><img
                                        src="./images/appicons/tiktok.png" alt=""></a>
                            </div>
                            <div class="xz-href-name"> <a
                                    href="https://www.douyin.com/user/MS4wLjABAAAACzQ7sRiH1hLqB8dIsZtbBJDOes48eCHYNj_IwYJAhjA">夏栀</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- swiper分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"></script>
    <script src="./js/index.js"></script>

</body>

</html>